<template>
  <div class="map-container">
    <out-line :height="height">
      <div id="map" class="map" :style="{ height: cHMap + 'px'}"></div>
      <div v-if="selectedMarker" class="infoWindow">
        <div class="infoWindowContent">
          <div class="infoWindowHeader">
            <!-- <img :src="selectedMarker.icon" alt="Icon" class="icon" /> -->
            <h3>{{ selectedMarker.name }}</h3>
          </div>
          <div class="infoWindowDetails">
            <p>联系电话：{{ selectedMarker.phone }}</p>
            <p>{{ selectedMarker.address }}</p>
            <p>老人总数：{{ selectedMarker.total }}</p>
            <p>服务人员：{{ selectedMarker.staff }}</p>
            <p>剩余床位：{{ selectedMarker.beds }}</p>
          </div>
          <div class="infoWindowImages">
            <!-- <img v-for="image in selectedMarker.images" :src="image" alt="Image" /> -->
          </div>
        </div>
      </div>
    </out-line>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';

export default {
  name: 'Map',
  props: {
    height: {
      type: Number,
      default: 200
    },
    cHMap: {
      type: Number,
      default: 200
    },
  },
  data() {
    return {
      map: null,
      markers: [], // 存储标记点
      infoWindow: null, // 信息窗口
      infoWindowContent: '', // 信息窗口内容
      polygons: [], // 存储多边形
      institutions: [
        {
          name: '某养老院',
          type: '养老院',
          address: '上党区某某街道某某路123号',
          phone: '0371-9556211',
          total: 100,
          staff: 20,
          beds: 80,
          polygon: [
            [116.397477, 39.908692],
            [116.410049, 39.908692],
            [116.410049, 39.902881],
            [116.397477, 39.902881]
          ]
        },
        {
          name: '某日间照料中心',
          type: '日间照料中心',
          address: '管城回族区经开区经北二路116号办公楼5楼管城回族区经开区经北二路116号办公楼5楼管城回族区经开区经北二路116号办公楼5楼',
          phone: '0371-9556222',
          total: 50,
          staff: 10,
          beds: 0,
          polygon: [
            [116.397477, 39.918692],
            [116.410049, 39.918692],
            [116.410049, 39.912881],
            [116.397477, 39.912881]
          ]
        },
        {
          name: '某社区服务中心',
          type: '社区服务中心',
          address: '金水区某某街道某某路456号',
          phone: '0371-9556333',
          total: 0,
          staff: 5,
          beds: 0,
          polygon: [
            [116.397477, 39.928692],
            [116.410049, 39.928692],
            [116.410049, 39.922881],
            [116.397477, 39.922881]
          ]
        }
      ],
      selectedMarker: null,
      
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      lazyAMapApiLoaderInstance.load().then(() => {
        this.map = new window.AMap.Map('map', {
          zoom: 13,
          center: [116.397477, 39.908692],
          mapStyle: "amap://styles/db027b434158ae048a7cb0a5b2e1872c",
        });

        // 创建信息窗口
        this.infoWindow = new window.AMap.InfoWindow({
          isCustom: true,
          content: '<div class="info-window">' + this.infoWindowContent + '</div>',
          offset: new window.AMap.Pixel(16, -45)
        });

        // 创建标记点
        this.institutions.forEach((institution) => {
          const marker = new window.AMap.Marker({
            position: institution.polygon[0],
            icon: this.getMarkerIcon(institution.type),
            map: this.map
          });
          marker.on('click', () => {
            this.showInfoWindow(institution);
            // 创建多边形
              const polygon = new window.AMap.Polygon({
                path: institution.polygon,
                strokeColor: '#FF33FF',
                strokeWeight: 2,
                fillColor: '#1791fc',
                fillOpacity: 0.2,
                map: this.map
              });
              this.polygons.push(polygon);
          });

          marker.on('mouseover', () => {
            // this.showInfoWindow(institution);
            this.showInfoWindow(institution, marker.getPosition());
          });

          marker.on('mouseout', () => {
            // this.hideInfoWindow();
            this.hideInfoWindow();
          });

          this.markers.push(marker);

          
        });
      });
    },
    getMarkerIcon(type) {
      let icon = '';

      switch (type) {
        case '养老院':
          icon = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
          break;
        case '日间照料中心':
          icon = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
          break;
        case '社区服务中心':
          icon = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
          break;
        default:
          icon = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
          break;
      }

      return icon;
    },
    // showInfoWindow(marker) {
      // this.selectedMarker = marker;
      // console.log("this.selectedMarker",this.selectedMarker)
    // },
    // hideInfoWindow() {
      // this.selectedMarker = null;
    // },
    showInfoWindow(institution, position) {
      this.infoWindowContent = `
        <div class="info-window-title">${institution.name}</div>
        <div class="info-window-content">
          <div class="info-window-item">类型：${institution.type}</div>
          <div class="info-window-item">地址：${institution.address}</div>
          <div class="info-window-item">联系电话：${institution.phone}</div>
          <div class="info-window-item">老人总数：${institution.total}</div>
          <div class="info-window-item">服务人员：${institution.staff}</div>
          <div class="info-window-item">剩余床位：${institution.beds}</div>
        </div>
      `;

      this.infoWindow.setContent('<div class="info-window">' + this.infoWindowContent + '</div>');
      this.infoWindow.open(this.map, position);
    },
    hideInfoWindow() {
      this.infoWindow.close();
    }
  }
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 500px;
}

.info-window {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.info-window-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.info-window-item {
  margin-bottom: 5px;
}

/* 另一个合并 */
.infoWindow {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.infoWindowContent {
  display: flex;
  flex-direction: column;
}

.infoWindowHeader {
  display: flex;
  align-items: center;
}

.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.infoWindowImages {
  display: flex;
  margin-top: 10px;
}

.infoWindowImages img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.infoWindowImages img:last-child {
  margin-right: 0;
}
</style>
